<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getYuFaJiLuApi
	} from '/api/request.js';
	const props = defineProps({});
	const platform = ref({});
	const list = ref(null);
	const query = ref({
		id: '',
	})
	onLoad((e) => {
		console.log(e);
		query.value = e
	})
	onShow(async () => {
		platform.value = uni.getStorageSync('platform');
		let res = await getYuFaJiLuApi(query.value);
		console.log(res);
		list.value = res.data
	});
	const goback = () => {
		uni.navigateBack();
	};
	const showPage = (id, ids, type) => {
		if (type == 1) {
			uni.navigateTo({
				url: '/pages/yufa/components/fuxi?ids=' + id + '&id=' + ids + '&wai=3',
				fail(e) {
					console.log(e);
				}
			});
		} else {
			uni.navigateTo({
				url: '/pages/yufa/components/tiku?id=' + id + '&gk_id=' + ids,
				fail(e) {
					console.log(e);
				}
			});
		}
	};
</script>

<template>
	<view class="wrap uni-col" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> {{query.title}} </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" style="flex: 1;">
			<view class="body" v-if="list && list.length">
				<view class="item " v-for="(item, index) in list" :key="index">
					<view class="title">
						{{item.name}}
					</view>
					<view class="itmes uni-row" v-for="(i,iIndex) in item.list" :key="index"
						@click="showPage(item.id, i.id,1)">
						<view class="left uni-row">
							<view class="name">
								第{{iIndex+1}}节
							</view>
							<view class="time">
								{{i.createtime}}
							</view>
						</view>
						<view class="right uni-col">
							<view class="uni-row">
								<text :class="i.strengthen==1?'active':'default'"></text>
								<view class="type" :class="i.strengthen==1?'active':'default'">

									{{i.strengthen==1?'待强化':'已强化'}}
								</view>
							</view>
							<view class="btn uni-row" @click.stop="showPage(item.id, i.gk_id,2)">
								刷题
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nothing" v-if="list && list.length < 1">
				<image src="/static/img/nothing.png" class="img"></image>
				<view class="label"> 哎呀，这里什么内容都没有 </view>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			margin-top: 20rpx;
			padding: 0 28rpx 40rpx;

			.item {
				.title {
					font-size: 32rpx;
					margin: 20rpx 0;
				}

				.itmes {
					justify-content: space-between;
					height: 134rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					padding: 24rpx 28rpx;

					.left {
						.name {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}

						.time {
							margin-left: 20rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #B3B3B3;
						}
					}

					.right {
						height: 100%;
						justify-content: space-between;
						align-items: flex-end;

						text {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							margin: 0 16rpx;

							&.active {
								background: #EF4828;
							}

							&.default {
								background: #5BD145;
							}
						}

						.type {
							font-size: 20rpx;

							&.active {
								color: #EF4828;
							}

							&.default {
								color: #5BD145;
							}
						}

						.btn {
							justify-content: center;
							width: 94rpx;
							height: 44rpx;
							background: #FA6F01;
							border-radius: 8rpx;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>